<script type="text/x-template" id="cider-artist">
    <div class="content-inner artist-page" :class="[data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) ? 'animated' : '']">
        <div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
            <animatedartwork-view
                    :priority="true"
                    v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
                    :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
            </animatedartwork-view>
            <div class="header-content" style="pointer-events: all;">
                <div class="row">
                    <div class="col-sm" style="width: auto;">
                        <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                            <mediaitem-artwork
                                    shadow="large"
                                    :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                    size="190" type="artists"></mediaitem-artwork>
                            <button class="overlay-play"  @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                            app.mk.play()
                        })">
                                <%- include("../svg/play.svg") %>
                            </button>
                        </div>
                    </div>
                    <div class="col flex-center artist-title"
                         :class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) }"
                    >
                        <button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                        app.mk.play()
                    })"><%- include("../svg/play.svg") %></button>
                        <h1>{{ data.attributes.name }}</h1>
                    </div>
                </div>
                <button class="more-btn-round" @click="artistMenu" style="pointer-events: all;">
                    <div class="svg-icon"></div>
                </button>
            </div>
            <div class="artworkContainer" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                <artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
            </div>
        </div>
        <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
            <div class="row">
                <div class="col-auto flex-center">
                    <button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                        app.mk.play()
                    })"><%- include("../svg/play.svg") %></button>
                </div>
                <div class="col">
                    <h3>{{ data.attributes.name }}</h3>
                </div>
                <div class="col-auto flex-center">
                    <button class="more-btn-round" @click="artistMenu">
                        <div class="svg-icon"></div>
                    </button>
                </div>
            </div>
        </div>
        <div class="artist-body">
            <div class="row well">
                <div class="col">
                    <div class="row">
                        <div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
                            <h3>{{app.getLz('term.latestReleases')}}</h3>
                            <div style="width: auto;margin: 0 auto;">
                                <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
                                                     :item="song">
                                </mediaitem-square>
                            </div>
                        </div>
                        <div class="col" v-if="data.views['top-songs']">
                            <div class="row">
                                <div class="col" style="padding:0;">
                                    <h3>{{app.getLz('term.topSongs')}}</h3>
                                </div>
                                <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
                                    <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
                                </div>
                            </div>
                            <div class="mediaitem-list-item__grid">
                                <div class="grid-body">
                                    <mediaitem-list-item
                                    v-for="(song, index) in data.views['top-songs'].data.limit(16)"
                                    :index="index"
                                    :item="song"></mediaitem-list-item>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row well">
                <div class="col">
                    <template v-for="(view) in data.meta.views.order"
                              v-if="(data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
                        <div class="row">
                            <div class="col">
                                <h3>{{ data.views[view].attributes.title ?
                                    data.views[view].attributes.title : "???"}}
                                </h3>
                            </div>
                            <div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
                                <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">{{app.getLz('term.seeAll')}}</button>
                            </div>
                        </div>
                        <template v-if="!((data.views[view].attributes.title ?
                        data.views[view].attributes.title : '???').includes('Video') || (data.views[view].attributes.title ?
                        data.views[view].attributes.title : '???').includes('More To See'))">
                        <mediaitem-scroller-horizontal-large :items="data.views[view].data.limit(10)">
                        </mediaitem-scroller-horizontal-large>
                        </template>
                        <template v-else>
                            <mediaitem-scroller-horizontal-mvview
                                        :items="data.views[view].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                        </template>
                    </template>
                    <div class="row">
                        <div class="col" v-if="data.attributes.artistBio">
                            <h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3> 
                            <p v-html="data.attributes.artistBio"></p>
                        </div>
                        <div class="col">
                            <div v-if="data.attributes.origin">
                                <h3>{{ data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
                                {{ data.attributes.origin }}
                            </div>
                            <div v-if="data.attributes.bornOrFormed">
                                <h3>{{ data.attributes.isGroup ? "Formed" : "Born" }}</h3>
                                {{ data.attributes.bornOrFormed }}
                            </div>
                            <div v-if="data.attributes.genreNames">
                                <h3>{{app.getLz('term.sortBy.genre')}}</h3>
                                {{ data.attributes.genreNames.join(', ') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script>
    Vue.component('cider-artist', {
        template: "#cider-artist",
        props: ['data'],
        data: function () {
            return {
                topSongsExpanded: false,
                app: this.$root,
                headerVisible: true
            }
        },
        methods: {
            isHeaderVisible(visible) {
                this.headerVisible = visible
            },
            artistMenu (event) {
                let self = this
                let followAction = "follow"
                let followActions = {
                    follow: {
                        icon: "./assets/feather/plus-circle.svg",
                        name: app.getLz('action.follow'),
                        action: ()=>{
                            self.app.cfg.home.followedArtists.push(self.data.id)
                        }
                    },
                    unfollow: {
                        icon: "./assets/feather/x-circle.svg",
                        name: app.getLz('action.unfollow'),
                        action: ()=>{
                            let index = self.app.cfg.home.followedArtists.indexOf(self.data.id)
                            if (index > -1) {
                                self.app.cfg.home.followedArtists.splice(index, 1)
                            }
                        }
                    }
                }
                if(this.app.cfg.home.followedArtists.includes(self.data.id)) {
                    followAction = "unfollow"
                }
                app.showMenuPanel({
                    items: [
                        {
                            icon: "./assets/feather/play.svg",
                            name: app.getLz('action.startRadio'),
                            action: ()=>{
                                app.mk.setStationQueue({artist:self.data.id}).then(()=>{
                                    app.mk.play()
                                })
                            }
                        },
                        followActions[followAction],
                        {
                            icon: "./assets/feather/share.svg",
                            name: app.getLz('term.share'),
                            action: ()=>{
                                self.app.copyToClipboard(self.data.attributes.url)
                            }
                        }
                    ]
                }, event)
            },
            getArtistPalette(artist) {
                if (artist["attributes"]["artwork"]) {
                    return {
                        "background": "#" + artist["attributes"]["artwork"]["bgColor"],
                        "color": "#" + artist["attributes"]["artwork"]["textColor1"],
                    }
                } else {
                    return {
                        "background": "#000000",
                        "color": "#ffffff",
                    }
                }
            },
            getTopResult() {
                if (this.search.results["meta"]) {
                    return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
                } else {
                    return false;
                }
            }
        }
    })
</script>